@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.fava-icon.loading {
  padding: 0;
  border-top: 2px solid var(--color-header-text);
  border-radius: 50%;
  animation: spinner 1s linear infinite;
}

.fava-icon.loading path {
  opacity: 0;
}

.beancount-files ul {
  max-height: 400px;
  margin-bottom: 0;
  overflow-y: auto;
}

.beancount-files a {
  display: block;
  padding: 8px 12px 8px 28px;
  cursor: pointer;
}

.beancount-files a.active,
.beancount-files a:hover {
  color: var(--color-background);
  background-color: var(--color-links);
}

.beancount-files a.active {
  background-image: url("");
  background-repeat: no-repeat;
  background-position: 9px center;
}

h1 {
  display: block;
  flex: 1;
  max-height: var(--header-height);
  padding: calc((var(--header-height) - 24px) / 2) 10px;
  margin: 0;
  overflow: hidden;
  font-size: 16px;
  font-weight: normal;
  color: var(--color-header-text);
}

h1 .droptarget {
  padding: 0.6em;
  margin-left: -0.6em;
}

/* stylelint-disable no-descending-specificity */
h1 a:hover,
h1 a:link,
h1 a:visited {
  color: inherit;
}
/* stylelint-enable no-descending-specificity */

h1 .last-activity {
  display: inline-block;
  margin-left: 10px;
  font-size: 12px;
  font-weight: normal;
  opacity: 0.8;
}

h1 .status-indicator {
  width: 10px;
  height: 10px;
  margin: 0 0 0 10px;
  border-radius: 10px;
}

h1 .status-indicator.status-gray {
  margin-left: 0;
}

.page-title::before {
  margin: 0 10px;
  font-weight: normal;
  color: var(--color-header-text-half);
  content: "›";
}

.reload-page {
  padding-right: 12px;
  padding-left: 12px;
  margin-top: -8px;
  margin-left: 20px;
  background-color: var(--color-warning);
}

.beancount-files {
  position: absolute;
  top: var(--header-height);
  left: 19px;
  display: none;
  width: 20em;
  color: var(--color-links);
  background-color: var(--color-background);
  border: 1px solid var(--color-background-darker);
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  box-shadow: 0 3px 6px var(--color-transparent-black);
}

h1:hover .beancount-files {
  display: block;
}

.filter-form {
  display: flex;
  padding-top: 7px;
  margin: 0;
  color: var(--color-text);
}

.filter-form > span {
  position: relative;
  margin: 0 4px 6px 0;
}

.filter-form input {
  max-width: 18rem;
  padding: 8px 25px 8px 10px;
  margin: 0;
  background-color: var(--color-background);
  border: 0;
  outline: none;
}

.filter-form [type="text"]:focus {
  color: var(--color-text);
  background-color: var(--color-background);
}

.filter-form [type="text"]:placeholder-shown,
.filter-form [type="text"]::placeholder {
  color: var(--color-header-tinted);
  opacity: 1;
}

.filter-form [type="text"]:focus:placeholder-shown,
.filter-form [type="text"]:focus::placeholder {
  color: var(--color-header-tinted);
}

.filter-form [type="submit"] {
  display: none;
}

.filter-form .empty input {
  background-color: var(--color-header-light);
}

.filter-form .close {
  position: absolute;
  top: 8px;
  right: 0;
  display: block;
}

.filter-form .empty .close {
  display: none;
}
